<template>
        <div id="tmpl">
            <!--图片分类  -->
            <div class="cate">
                <ul v-bind="{style:'width:'+ulWidth+'px'}">
                    <li @click="getimages(0)">全部</li>
                    <li v-for="item in cates" @click="getimages(item.id)">{{item.title}}</li>
                </ul>
            </div>
            <!--图片详情  -->
            <div id="photolist">
                <ul>
                    <li v-for="item in list">
                        <router-link  v-bind="{to:'/photo/photoinfo/'+item.id}"> 
                            <img v-lazy="item.img_url">
                            <div id="desc">
                                <h5 v-text="item.title"></h5>
                                <p v-text="item.zhaiyao"></p>
                            </div>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
</template>

<script>
import common from '../../kits/common.js';
import {Toast} from 'mint-ui';
        export default{
            data(){
                return {
                    ulWidth:320,
                    cates:[],
                    list:[]    
                }
            },
            methods:{
                getimages(cateid){
                    cateid = cateid || 0;   //0代表获取全部图片
                    var url = common.apiDomain + '/api/getimages/'+cateid;
                    this.$http.get(url).then(function(res){
                        if(res.body.status != 0 ){
                            Toast(res.body.message);
                            return;
                        }
                        this.list = res.body.message;
                    })
                },
                getcates(){
                    var url = common.apiDomain+'/api/getimgcategory';
                    this.$http.get(url).then(function(res){
                        if(res.body.status != 0){
                            Toast(res.body.message);
                            return;
                        }
                        this.cates = res.body.message;
                        //当前分类数据所在ul的总宽度:分类的个数*每个的宽度
                        var w = 62;
                        var count = res.body.message.length+1;
                        this.ulWidth = w * count;
                    })
                }
            },
            created(){
                //获取分类
                this.getcates();
                //加载图片详情
                var all = 0; //获取所有数据
                this.getimages(all);
            }
        }
</script>

<style scoped>
/*分类  */
    .cate{
         width: 375px;
         max-width: 375px;
         overflow-x: auto;
    }
    .cate ul{
        margin: 0px;
        padding-left: 10px;
        width: 1000px;
    }
    .cate li{
        display: inline-block;
        list-style: none;
        color: #0094ff;
        padding-left: 6px;
        font-size: 14px;
        cursor: pointer;
    }
/*图片详情  */
    #photolist{

    }
    #photolist ul{
        padding-left: 0px;
    }
    #photolist li{
        list-style: none;
        position: relative;
    }
    #photolist img{
        width: 100%;
        height: 300px;
    }

    #desc{
        width: 100%;
        background-color: rgba(0,0,0,0.4);
        position: absolute;
        bottom: 2px;
        left: 0px;
    }
    #desc h5{
        color: #ffffff;
        font-weight: bold;
    }
    #desc p{
        color: #ffffff;
    }

    /*配合延迟加载使用  */
    image[lazy=loading]{
        width: 40px;
        height: 300px;
        margin: auto;
    }
</style>